<template>
	<view>
		<view>
			<!-- 注：“page-size”设为0在此处不是指“每页最多可显示0条数据”，而是直接表示“取消设置分页，所有数据全部在一页内展示 -->
			<unicloud-db v-slot:default="{data,loading,error,options}" collection="opendb-mall-categories" field="_id,parent_id,name,sort" orderby="sort" :page-size="0">
				<view class="categoryWrapper" v-if="!loading">
					<!-- 左侧导航栏↓ -->
					<view class="categoryNavbar">
						<!-- 注：1.“data.filter((item) => !item.parent_id)”↓表示“筛选出所有一级分类（"parent_id"为空，即“无父级”的记录）”，即“只显示一级分类”；2.array.map((item) => item.name)↓表示“将一级分类的名称（"name"字段）取出，形成一个数组”，即“分段器选项卡标签上显示的文字”；3.“styleType”属性被用于展示分段器的样式类型，可选值有“button”和“text”，此处用的是“text”样式类型，即“文字”；4.“@clickItem”是分段器组件的一个事件（当用户点击选项卡时触发）↓ -->
						<uni-segmented-control :current="currentBeSelectedTab" :values="data.filter((item) => !item.parent_id).map((item) => item.name)" styleType="text" @clickItem="handlerForUserClickItemInTheComponentThatBeNamedUniSefmentedControl"></uni-segmented-control>
					</view>
					<!-- 右侧内容区↓ -->
					<!-- 注：“swiper”组件被用于显示“滑块视图容器”，这个组件一般被用于左右滑动或上下滑动（比如banner轮播图）。“vertical”属性是一个“布尔属性”，它被用于确定“滑动方向是否为纵向”（此处用的是“纵向”，即“垂直滑动”）↓ -->
					<swiper class="contentInCategory" vertical @change="handlerForChangeSwipper" :current="currentBeSelectedTab">
						<!-- 循环显示所有一级分类↓ -->
						<!-- <swiper-item class="categoryItem" v-for="(item,index) in data.filter((anotherItem) => {return !anotherItem._id})" :key="item._id"> -->
						<swiper-item class="categoryItem" v-for="(item,index) in data.filter((anotherItem) => {return !anotherItem.parent_id})" :key="item._id">
							<!-- 二级分类列表（循环显示当前被选中的二级分类）↓ -->
							<!-- <view class="categoryItem2" v-for="(item2,index) in data.filter((anotherItem) => {return anotherItem._id === item._id})" :key="item2._id">{{ item2.name }}</view> -->
							<view class="categoryItem2" @click="handlerForGoToSearchPageWithUseThisCategoryAsKeywords(item2.name)" v-for="(item2,index) in data.filter((anotherItem) => {return anotherItem.parent_id === item._id})" :key="item2._id">{{ item2.name }}</view>
						</swiper-item>						
					</swiper>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentBeSelectedTab: 0 // 分段器中当前被选中的选项卡是哪一个（0为第一个选项卡）
			}
		},
		methods: {
			/**
			 * 函数“handlerForUserClickItemInTheComponentThatBeNamedUniSefmentedControl”被用于处理“用户点击分段器组件中的选项卡”时发生的事件
			 * @param event 事件对象，其中包含了用户点击的是哪一个选项卡的信息（即“当前被选中的选项卡的索引值”）
			 */
			handlerForUserClickItemInTheComponentThatBeNamedUniSefmentedControl(event) {
				console.log(event); // 输出事件对象，控制台中显示“{currentIndex: 1}”
				// 如果当前被选中的选项卡不是用户点击的那个，则更新为“被用户点击的那个”↓
				if (this.currentBeSelectedTab != event.currentIndex) {
					this.currentBeSelectedTab = event.currentIndex					
				}
			},
			/**
			 * 函数“handlerForChangeSwipper”被用于处理swiper组件的切换事件
			 * @param event 事件对象，其中包含了swiper组件当前显示的是哪一个页面的信息（即“当前显示的页面索引值”）
			 */
			handlerForChangeSwipper(event) {
				console.log(event); // 输出事件对象，控制台中显示“{type: 'change', timeStamp: 0, target: {…}, currentTarget: {…}, detail: {…}}”，从输出内容中可以看到事件对象中有“detail.current”属性，它表示当前显示的页面索引值↓	
				if (this.currentBeSelectedTab != event.detail.current) {
					// 如果当前显示的页面不是用户滑动到的那个，则更新为“被用户滑动到的那个”↓
					this.currentBeSelectedTab = event.detail.current
				}
			},
			/**
			 * 函数“handlerForGoToSearchPageWithUseThisCategoryAsKeywords”被用于处理用户点击某个一级分类时发生的事件(即“跳转到搜索页面并使用当前这个一级分类作为关键词进行搜索”)
			 * @param categoryName 用户点击的那个一级分类的名字（即“关键词”）
			 */
			handlerForGoToSearchPageWithUseThisCategoryAsKeywords(categoryName) {
				console.log(categoryName); // 五花肉				
				// 跳转到搜索页面并使用当前这个一级分类作为关键词进行搜索（“动画类型”为“淡入”（即“渐显”））↓
				uni.navigateTo({url: `/pages/list/search/search?name=${categoryName}`,animationType:'fade-in',})
			}
		}
	}
</script>

<style>
.categoryWrapper{
	display: flex;
	/* 注：1.容器高度需要经过计算来得出，它等于“视窗高度 - 底部安全区（即导航栏“navbar”）的高度 - 顶部状态栏（标题栏）的高度”；
	2.文心快码解释了“var(--window-bottom)和var(--window-top)为什么能表示导航栏和标题栏的高度”和“var()这种语法是什么”：
	理解CSS变量和导航栏/标题栏高度表示：关于var(--window-bottom)和var(--window-top)：在CSS中，var()函数用于访问一个或多个自定义属性的值。
	这两个CSS变量(var(--window-bottom)和var(--window-top))能够表示导航栏和标题栏的高度，是因为它们被开发者定义为存储这些特定尺寸值的CSS自定义属性。这并不是CSS的内置功能，而是开发者有意为之的设计选择。
	工作原理：1.定义阶段：在CSS的某个地方（可能是根元素或特定组件），开发者会这样定义：【:root {--window-top: 50px;--window-bottom: 80px; }】
	2.使用阶段：然后在布局计算中引用这些变量：【.content {margin-top: var(--window-top);margin-bottom: var(--window-bottom);}】
	关于var()语法：“var()”是CSS中的一个函数，用于插入一个或多个自定义属性的值。它允许你在任何属性中动态地引用这些值的当前状态，从而实现更灵活的样式设计。
	“var()”是CSS的自定义属性(CSS Variables)功能的核心语法：1.基本语法：【var(--custom-name, fallback-value)】a.--custom-name：自定义属性名称（必须以两个连字符开头）；b.fallback-value（可选）：当变量未定义时的回退值
	2.特点：a.允许在CSS中定义可复用的值；b.可以通过JavaScript动态修改；c.支持级联（可以像普通CSS属性一样继承和覆盖）；
	3.优势：a.减少重复代码；b.方便主题切换；c.便于维护（修改一处定义即可影响所有使用该变量的地方）
	为什么这样设计：使用CSS变量表示导航栏和标题栏高度有以下好处：
	1.一致性：确保整个应用中这些尺寸值保持一致；
	2.可维护性：修改高度只需调整变量定义，无需查找所有使用该值的地方；
	3.响应式设计：可以配合媒体查询在不同屏幕尺寸下调整这些变量值；
	4.动态调整：可以通过JavaScript动态修改这些变量来实现动画或用户自定义；
	这种模式在现代化Web开发中非常常见，特别是在组件化框架（如React、Vue等）中↓ */
	height: calc(100vh - var(--window-bottom) - var(--window-top));
}
/* 让左侧导航栏固定宽度↓ */
.categoryNavbar{
	/* width: 200px; */
	width: 200rpx;
	border-right:1px solid #ccc;
	margin: 10rpx 0;
}
/* 把导航栏改为“在屏幕左侧纵向排列”（由于涉及到需要修改第三方插件（组件）内部的样式，所以在此处需要使用“深度选择器”（即“::v-deep”伪类）↓ */
::v-deep .segmented-control{
	/* 此处使用“!important”修饰符是为了确保样式能够覆盖第三方插件（组件）内部的默认样式↓ */
	flex-direction: column !important;
	height: auto !important; 
}
::v-deep .uni-segmented-control__item{
	margin-bottom:30rpx !important;
}
.contentInCategory{
	/* 让右侧内容区域填充剩余空间↓ */
	flex: 1;
	height:100%
}
/* 每个一级分类项对应面板的样式↓ */
.categoryItem{
	display: flex;
	/* 注：“flex-wrap: wrap;”这条样式规则的效果是“允许flex容器中的项目在空间不足时自动换行到新行”，即“换行显示”↓ */
	flex-wrap: wrap;
	/* 注：“align-content: start;”这条样式规则的效果是“让flex容器中的项目在交叉轴（即主轴的垂直方向）上对齐到起始位置”，即“顶部对齐”↓ */
	align-content: start;
}
/* 每个二级分类项对应面板的样式↓ */
.categoryItem2{
	width: 33%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
}
</style>
